<style>
#survey-info li {
	height: 25px;
    width: 100%;
    color: #00557F;
    list-style: none;
}

#survey-info ul {
	padding: 0px 40px;
	margin: 5px 0px;
	font-size: 12px;
	font-family: 'Helvetica'; 
}

#survey-info li:nth-child(odd) { 
	background-color: #FFFFFF; 
}

#survey-info li:nth-child(even) { 
	background-color: #E1EEF4;
}

.answerValue {
	float: left;
	padding: 1px 0 1px 4px;
    width: 48%;
}

.answerValue input {
	margin: 0px;
}

.surveyTitleContainer {
	display: table;
	width: 100%;
	padding: 0px 0px 5px 0px;
}

.complaintName {
    margin-top: 2px;
	float: left;
    color: #00557F;
    padding: 2px 0px 2px 4px;
    width: 48%;
}

.editButton {
	float: right; 
	margin-right: 20px;
	background-color: #54BD06;
    border-radius: 8px 8px 8px 8px;
    color: white !important;
    font-size: 12px;
    padding: 3px 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.editButton:hover {
	opacity: 0.8;
}

.surveyAnswerBtn {
	height: 20px;
	width: 80px;
}

.surveyAnswerBtn span {
	height: 20px;
	margin: 0px;
	padding: 0px !important;
}
 
.editButtonDiv {
	display: table;
    height: 25px;
    position: relative;
    width: 100%;
}
</style>

<script>
$(document).ready(function() {
	$(".radio").each(function() {
		$(this).buttonset();
	});
});

$("#editComplaintButton").click(function(){
	$("#editComplaintButton").attr("disabled", true);	
});

var saveComplaints = function () {
	var jsonObject = "";
	var surveyId = $("#hidden-survey-id").val();
	var medicineCardId = $("#hidden-med-card-id").val();
	var syndromeId = $("input[name='synd_radio']:checked").attr('value');

	jsonObject = jsonObject + "{'surveyId':" + surveyId + ",";
	jsonObject = jsonObject + "'medicineCardId':" + medicineCardId + ",";
	jsonObject = jsonObject + "'syndromeId':" + syndromeId + ",";
	
	jsonObject = jsonObject + "'complaints':[";
	$("#survey-info input[type='radio']:checked").each(function() {
		jsonObject = jsonObject + "{'id':" + $(this).attr('name');
		jsonObject = jsonObject + ",'value':" + $(this).attr('value') + "},";
	});
	jsonObject  = jsonObject.substring(0, jsonObject.length - 1);
	jsonObject = jsonObject + "]}";

	$.ajax({
		type : "POST",
		url : "/surveyView/saveComplaints",
		data : jsonObject,
		dataType : "json",
		contentType : "application/json",
		success : function(id) {
			$("#hidden-survey-id").val(id);
			noty({
				text: "&{'complaints.save.success'}",
				layout: "topRight",
				type: "success"
				});
		},
		error : function(e) {
			noty({
				text: "&{'complaints.save.error'}",
				layout: "topRight",
				type: "error"
			});
		}
	});
};
</script>

<div id="survey-info">
	#{if syndrome != null}
		#{list items: models.ComplaintType.find("bySyndrome", syndrome).fetch(), as:'complaintType'}
			<div class="complaintTypeName">${complaintType.complaintTypeName}</div>
			<ul>
 			#{list items:models.Complaint.find("byComplaintType", complaintType).fetch(), as:'complaint'}
	    		<li class="complaint-item">
	    			<div class="complaintName">${complaint.complaintName}</div>
					<div class="answerValue">
						<div class="radio">
					        <input class="radio-button" type="radio" id="radio_${complaint.complaintId}_0" name="${complaint.complaintId}" value="0" checked="checked"/>
					        <label for="radio_${complaint.complaintId}_0" class="surveyAnswerBtn">0</label>
					        <input class="radio-button" type="radio" id="radio_${complaint.complaintId}_1" name="${complaint.complaintId}" value="1"/>
					        <label for="radio_${complaint.complaintId}_1" class="surveyAnswerBtn">1</label>
					        <input class="radio-button" type="radio" id="radio_${complaint.complaintId}_2" name="${complaint.complaintId}" value="2"/>
					        <label for="radio_${complaint.complaintId}_2" class="surveyAnswerBtn">2</label>
					        <input class="radio-button" type="radio" id="radio_${complaint.complaintId}_3" name="${complaint.complaintId}" value="3"/>
					        <label for="radio_${complaint.complaintId}_3" class="surveyAnswerBtn">3</label>
		   				</div>
					</div>
 	    		</li>
	    	#{/list}
	    	</ul>
 		#{/list}
 		<div class="editButtonDiv">
 			<input type="submit" class="editButton" onclick="saveComplaints()" id="editComplaintButton" value="&{'save'}">
		</div>
	#{/if}
</div>